<template>
  <div id="myNews">
    <header>
      <i @click="goBack()"></i>
      <div>我的消息</div>
      <s @click="hasRead()"></s>
    </header>
    <div class="nav">
      <div class='active' @click='getNewsList(0,sentPage,"click")'>
        <a class="abstract">
          <b>全部消息</b>
        </a>
      </div>
      <div @click='getNewsList(1,sentPage,"click")'>
        <a class="newfresh">
          <b>系统消息</b>
        </a>
      </div>
    </div>
    <div class="swipe">
      <div class="allNews">
        <!-- <div class="markReadBox"  v-if="list.length>=1">
                    <div class="markRead" @click='hasRead'>全部标为已读</div>
                </div> -->
        <div class='box'>
          <Loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
            <ul class="allNewsList">
              <div class='mc' v-if="list.length<1">
                <!-- <img src="../../image/no_collection@2x.png" width='110' alt=""> -->
                <p>您还没有相关的消息</p>
              </div>
              <li v-for="(item,index) in list" :key="index">
                <router-link :to='{name: "myNewsDetails",query: {id: item.id}}' :class='item.read?"hasRead":""'>
                  <div>
                    <h3>{{item.name}}</h3>
                    <p>
                      <time>{{item.time}}</time>
                      <span></span>
                    </p>
                    <div>{{item.content}}</div>
                  </div>
                  <span></span>
                </router-link>
              </li>
            </ul>
          </Loadmore>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
  import {
    Loadmore
  } from 'mint-ui';
  // import allNews from '../../components/myNews/allNews.vue'
  // import systemNews from '../../components/myNews/systemNews.vue'
  export default {
    data() {
      return {
        list: [],
        userid: '',
        type: 'all', //全部消息 系统消息 all window
        isShow: true,
        sentPage: {
          page: 1, //分页累加
        }, //接口入参
        totalNum: 0, //总数据条数
        allLoaded: false, //分页数据是否已经加载完毕
      }
    },
    components: {
      Loadmore,
      // 'all-news': allNews,
      // 'system-news': systemNews,
    },
    methods: {
      goBack() {
        if (this.$route.query.type == 'home') {
          this.$router.push({
            path: '/home'
          })
        } else {

          this.$router.push({
            path: '/my'
          })
        }
      },
      // 登录拦截
      isLogin() {
        this.userid = localStorage.getItem("loginMobile");
        if (!this.userid) {
          this.$router.push('/login1')
          return false;
        } else {
          return true;
        }
      },
      // changeSwip(para,index) {
      // 	this.isShow = para;
      // 	$(".nav div a").removeClass("active");
      // 	$(".nav div").eq(index).find("a").addClass("active");
      // },
      //获取消息列表
      getNewsList(i, params, click) {
        $('.nav div').eq(i).addClass('active').siblings().removeClass();
        //每点击一次初始化
        if (click) {
          this.list = [];
          this.sentPage.page = 1;
          this.allLoaded = false;
        }
        this.userid = localStorage.getItem("loginMobile");
        if (i == 0) {
          this.type = 'all';
          this.$api.post(this.$api.baseURLSchool, "selecttype_view/message/0?userid=" + this.userid, params, r => {
            // console.log(r);
            this.totalNum = r.data.records;
            if (this.sentPage.page == 1) {
              this.list = r.data.rows;
            } else {
              this.list = this.list.concat(r.data.rows);
            }
            if (r.data.rows.length == 0 && this.sentPage.page > 1) {
              this.$utils._toast("暂无更多数据");
            }
            if (r.data.ret == -3) {
              localStorage.clear();
              this.isLogin()
            }

          }, err => {
            console.log(err);
          })
        }
        if (i == 1) {
          this.type = 'window';
          this.$api.post(this.$api.baseURLSchool, "selecttype_view/message/0?userid=" + this.userid + "&type=window",
            params, r => {
              console.log(r);
              this.totalNum = r.data.records;
              if (this.sentPage.page == 1) {
                this.list = r.data.rows;
              } else {
                this.list = this.list.concat(r.data.rows);
              }
              if (r.data.rows.length == 0 && this.sentPage.page > 1) {
                this.$utils._toast("暂无更多数据");
              }
              if (r.data.ret == -3) {
                localStorage.clear();
                this.isLogin()
              }
            }, err => {
              console.log(err);
            })
        }
      },
      //上拉加载下一页
      loadBottom() {
        (this.sentPage.page) ++;
        if (this.type == 'all') {
          setTimeout(() => {
            this.getNewsList(0, this.sentPage);
          }, 20);
        } else if (this.type == "window") {
          setTimeout(() => {
            this.getNewsList(1, this.sentPage);
          }, 20);
        }
        if (this.totalNum == this.list.length) {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      },
      // 全部标记已读
      hasRead() {
        // read  是否读过  true 读过 false 未读
        // console.log(this.list);
        this.list.forEach((val, index) => {
          const obj = {
            id: val.id,
            read: true
          }
          this.$api.post(this.$api.baseURLSchool, "updatedata/message/edit", obj, r => {
            // console.log(r);
            if (this.type == 'all') {
              this.getNewsList(0, this.sentPage, "click");
            } else {
              this.getNewsList(1, this.sentPage, "click");
            }
          }, err => {
            console.log(err);
          })
        });
      }
    },
    created() {
      this.getNewsList(0, this.sentPage);
    }
  }

</script>
<style lang="scss" scoped>
  .mc {
    padding: 40px 0;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);

    img {
      display: block;
      margin: 0 auto;
    }

    p {
      padding-top: 10px;
      text-align: center;
    }
  }

</style>
